<template>
  <view class="container">
    <view class="desc">
      <text>绑定手机号</text>
    </view>
    <view class="text" v-if="false">
      若您想使用平台的产品, 您至少需要提供手机号(用于接收短信验证码),
      以及收取订单物流信息.
      如您拒绝提供手机号, 您将无法在平台创建帐户进行购物.
      但并不影响您正常浏览平台产品!
    </view>
    <view class="text">
      如果您同意, 请选择同意获取, 否则, 请点击拒绝!
    </view>
    <view class="mobile">
      <button class="txt" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意获取</button>
    </view>
    <view class="deny" @click="onDeny">拒绝</view>
  </view>

</template>

<script>
import User from '../../api/user'
import base64 from '../../util/base64'
const userModel = new User()


export default {
  methods: {
    getPhoneNumber(e) {
      const detail = e.detail
      // console.log(e)
      /**
       * 在获取的过程中, 如果点击了拒绝(腾讯提供的拒绝按钮)
       * API会删除openid对应的记录
       */
      userModel.saveMobile({ data: detail.encryptedData, iv: detail.iv, session_key: userModel.getSessionKey() }).then(response => {

        let { data } = response
        data = base64.parse(data)
        console.log(data)

        this.$store.dispatch('User/login', data.token).then(() => {

          // app支付使用
          const serial = uni.getStorageSync('o')
          if (serial) {
            uni.navigateTo({
              url: '/sub_main/pay/mini?serial=' + serial
            })
          } else {
            wx.switchTab({
              url: '/pages/center/index'
            })
          }


        })
      })
    },
    onDeny() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding-top: 100rpx;
  letter-spacing: 5rpx;
}

.desc {
  text-align: left;
  padding-left: 40rpx;
}

.desc text {
  color: #000;
  font-weight: 700;
  font-size: 32rpx;
}

.text {
  margin: 40rpx 40rpx 100rpx 40rpx;
  text-align: left;
  letter-spacing: 5rpx;
  line-height: 1.5em;
  font-size: 28rpx;
  color: #666;
}

.mobile {
  padding: 0 20px;
}
.txt {
  background: $main_color;
  color: white;
}

.deny {
  /*background: red;*/
  height: 50rpx;
  margin-top: 40rpx;
  text-align: center;
}

</style>
